// 年度总文献量
<template>
    <div id="Annual-paper" style="width: 100%;height: 100%;"></div>
</template>

<script setup lang = 'ts'>
import * as echarts from 'echarts'
import { onMounted, reactive, getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';
import { useMessage } from 'naive-ui';

type EChartsOption = echarts.EChartsOption;

// 引入路由
const router = useRouter()

// 引入消息函数
const message = useMessage()

//获取期刊/会议id
const id = router.currentRoute.value.params.id

// api访问代理
const { proxy } = getCurrentInstance() as any

onMounted(() => {
    initCharts()
})

const option: EChartsOption = reactive({
    title: {
        text: 'Total Paper per year'
    },
    xAxis: {
        data: []
    },
    yAxis: {},
    series: {
        data: [],
        type: 'line',
        smooth: true
    }
});

const initCharts = (() => {
    var chartDom = document.getElementById("Annual-paper")!;
    var myChart = echarts.init(chartDom);
    myChart.showLoading();

    proxy.$api.entity.getAnnualPaper({ id: id }).then((result: any) => {
        if (result.success) {
            myChart.hideLoading();
            (option.series as any).data = result.data;
            (option.xAxis as any).data = result.year;
            option && myChart.setOption(option);
        } else {
            message.warning(result.msg)
        }
    }).catch(() => {
        message.error('未知错误')
    });
})

</script>

<style scoped>
</style>